import React, {memo, useCallback, useState, useEffect, useRef} from 'react';
import {
  View,
  Modal,
  TouchableHighlight,
  Animated,
  Text,
  StyleSheet,
} from 'react-native';
import style from './CateFilterTop.style';
import Filterbox from './Filterbox';
import {useSelector} from 'react-redux';
import CateFilterSearch from './CateFilterSearch';
import Sort from './Sort';
import Size from './Size';
import Categroys from './Categroys';
import Colors from '../../utils/Colors';

const CateFilterModal = ({
  onRequestClose,
  select,
  showModal,
  onChange,
  onSelectSort,
  sortSelect,
}) => {
  const filters = useSelector(state => state.categroy.filters);
  return (
    <Modal
      animationType={'fade'}
      visible={showModal}
      transparent={true}
      onRequestClose={onRequestClose}>
      <View style={style.modalView}>
        <CateFilterSearch />
        <Filterbox select={select} onChange={onChange} />
        {select === 'Sort' ? (
          <Sort onSelectSort={onSelectSort} sortSelect={sortSelect} />
        ) : null}
        {select === 'Size' ? (
          <Size onSelectSort={onSelectSort} sortSelect={sortSelect} />
        ) : null}
        {select === 'Categroy' ? (
          <Categroys onRequestClose={onRequestClose} />
        ) : null}
      </View>
    </Modal>
  );
};

export default CateFilterModal;
